<template>
  <div>
    <t-input
      style="margin-bottom: 10px"
      clearable
      placeholder="请输入单位名称"
      v-model="deptName"
      @change="deptNameTreeFilter"
    >
      <template #prefix-icon>
        <t-icon name="search" class="icon" size="16" />
      </template>
    </t-input>
    <t-tree
      activable
      valueMode="all"
      :checkable="true"
      :value.sync="deptNameTreeValue"
      :data="data"
      :keys="{ value: 'id' }"
      @change="treeNodeChecked"
      :expandAll="true"
      :filter="filterByText"
      hover
      :expand-on-click-node="false"
    />
  </div>
</template>

<script>
// import { treeselect } from '@/api/system/dept';

export default {
  name: 'DeptSelect',
  props: {
    data: {
      type: Array,
      default: () => ([])
    }
  },
  emits: ['select'],
  data() {
    return {
      deptName: '',
      deptNameTreeValue: [],
      deptOptions: [],
      filterByText: null
    };
  },
  created() {
    // this.getTreeselect();
  },
  methods: {
    // getTreeselect() {
    //   treeselect()
    //     .then((res) => {
    //       this.deptOptions = res.data;
    //     })
    //     .catch((e) => {
    //       this.$message.error(e.toString());
    //     });
    // },
    deptNameTreeFilter() {
      if (this.deptName) {
        this.filterByText = (n) => n.data.label.indexOf(this.deptName) > -1;
      } else {
        this.filterByText = null;
      }
    },
    treeNodeChecked(val) {
      console.log(val)
      this.$emit('select', val)
    }
  },
};
</script>

<style lang="less" scoped></style>
